<template>
    <div v-loading="loading">
        <el-card>
            <div slot="header" class="clearfix">
                <span>{{ $i18n.t('LOAN_INFO') }}</span>
            </div>
            <form-content v-show="!loading" :data="data.loan_info" :column-num="2"></form-content>
        </el-card>
        <el-card style="margin-top: 20px;">
            <div slot="header" class="clearfix">
                <span>{{ $i18n.t('ORDER_LOANED_LIST') }}</span>
            </div>
            <loaned-order-list-table :data="data.loaned_list" :loading="loading" />
        </el-card>
        <el-card style="margin-top: 20px;">
            <div slot="header" class="clearfix">
                <span>{{ $i18n.t('REPAYMENT_RECORD') }}</span>
            </div>
            <repayment-record-table :data="data.repayment_record" :loading="loading" />
        </el-card>
    </div>
</template>

<script>
    import FormContent from '@/components/FormContent'
    import { getOrderLoanedDetail } from '@/api/order'
    import RepaymentRecordTable from '@/components/Table/RepaymentRecord'
    import LoanedOrderListTable from '@/components/Table/LoanedOrderList'

    export default {
        name: 'OrderLoanedDetail',
        components: {
            LoanedOrderListTable,
            RepaymentRecordTable,
            FormContent
        },
        data () {
            return {
                activeName: 'default',
                data: {
                    loaned_list: [],
                    loan_info: [],
                    repayment_record: []
                },
                isShowPictures: false,
                loading: true
            }
        },
        created () {
            getOrderLoanedDetail(this.$route.query.id).then(res => {
                const { result } = res
                this.data = result
            }).finally(() => {
                this.loading = false
            })
        },
        methods: {
            tableRowClassName ({ row, rowIndex }) {
                if (row.id === this.$route.query.id) {
                    return 'warning-row'
                }
                return ''
            }
        }
    }
</script>
